﻿@{
    Layout = null;
}

<!DOCTYPE html>
<html>
<head>
    <title>WebSockets Client</title>
    <style>
        body  
        {
            font-family:Arial, Helvetica, sans-serif;
        } 
        #container {
             border:5px solid grey; width:800px; margin:0 auto; padding:10px;
        }
        #chatLog {
             padding:5px; border:1px solid black;
        }
        .event 
        {
            color:#999;
        } 
        .warning 
        {
            font-weight:bold; color:#CCC;
        }
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script>
        $(document).ready(function () {

            connect();

            function connect() {
                var socket;
                var host = "ws://localhost:8183";

                try {
                    var socket = new WebSocket(host);

                    message('<p class="event">Socket Status: ' + socket.readyState);

                    socket.onopen = function () {
                        message('<p class="event">Socket Status: ' + socket.readyState + ' (open)');
                    }

                    socket.onmessage = function (msg) {
                        message('<p class="message">Received: ' + msg.data);
                    }

                    socket.onclose = function () {
                        message('<p class="event">Socket Status: ' + socket.readyState + ' (Closed)');
                    }

                } catch (exception) {
                    message('<p>Error' + exception);
                }

                function send() {
                    var text = $('#text').val();

                    if (text == "") {
                        message('<p class="warning">Please enter a message');
                        return;
                    }
                    try {
                        socket.send(text);
                        message('<p class="event">Sent: ' + text)

                    } catch (exception) {
                        message('<p class="warning">');
                    }
                    $('#text').val("");
                }

                function message(msg) {
                    $('#chatLog').append(msg + '</p>');
                }

                $('#text').keypress(function (event) {
                    if (event.keyCode == '13') {
                        send();
                    }
                });

                $('#disconnect').click(function () {
                    socket.close();
                });

            }

        });
    </script>
</head>
    <body>
    @ViewBag.Data
        <div id="wrapper">
            <div id="container">
                <div id="chatLog">
                </div>
                <input id="text" type="text" />
                <button id="disconnect">
                    Disconnect</button>
            </div>
        </div>
    </body>
</html>